<template>
  <el-card shadow="never" class="builder-toolbar">
    <el-form inline>
      <el-form-item label="行数">
        <el-input-number
          :model-value="rowCount"
          @change="(val: number) => emit('update:rowCount', val)"
          :min="1"
          :max="100"
          size="small"
        />
      </el-form-item>
      <el-form-item label="列数">
        <el-input-number
          :model-value="colCount"
          @change="(val:number) => emit('update:colCount', val)"
          :min="1"
          :max="50"
          size="small"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="small"
          @click="emit('merge-selected')"
          :disabled="!canMerge"
          >合并单元格</el-button
        >
        <el-button
          type="warning"
          size="small"
          @click="emit('unmerge-selected')"
          :disabled="!canUnmerge"
          >取消合并</el-button
        >
      </el-form-item>
      <el-form-item label="数据元模型">
        <el-select
          :model-value="selectedMetaModelName"
          @change="(val:any) => emit('select-meta-model', val)"
          placeholder="选择元模型"
          size="small"
          clearable
        >
          <el-option
            v-for="meta in availableMetaModels"
            :key="meta.name"
            :label="meta.name"
            :value="meta.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="success" size="small" @click="emit('save-definition')"
          >保存定义</el-button
        >
        <el-button type="info" size="small" @click="emit('load-definition')"
          >加载定义</el-button
        >
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import type { PropType } from 'vue';
import { DataMetaModel } from '@/models/meta-model.model.ts';

defineProps({
  rowCount: { type: Number, required: true },
  colCount: { type: Number, required: true },
  canMerge: { type: Boolean, default: false },
  canUnmerge: { type: Boolean, default: false },
  availableMetaModels: {
    type: Array as PropType<DataMetaModel[]>,
    default: () => [],
  },
  selectedMetaModelName: { type: String, default: '' },
});

const emit = defineEmits([
  'update:rowCount',
  'update:colCount',
  'merge-selected',
  'unmerge-selected',
  'select-meta-model',
  'save-definition',
  'load-definition',
]);
</script>

<style scoped>
.builder-toolbar {
  margin-bottom: 10px;
}
.el-form-item {
  margin-bottom: 0;
}
</style>
